import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getDynamicFonts } from '@/utils/fontUtils';

const DangerZone: React.FC = () => {
    const { t, i18n } = useTranslation();
    const dynamicFonts = getDynamicFonts(i18n);

    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [isConfirmDeleteModalOpen, setIsConfirmDeleteModalOpen] = useState(false);
    const [reason, setReason] = useState('');
    const [description, setDescription] = useState('');

    const handleOpenDeleteModal = () => {
        setIsDeleteModalOpen(true);
    };

    const handleCloseDeleteModal = () => {
        setIsDeleteModalOpen(false);
    };

    const handleNext = () => {
        if (!reason || !description) {
            // 表单验证，确保用户填写了必要信息
            return;
        }

        setIsDeleteModalOpen(false);
        setIsConfirmDeleteModalOpen(true);
    };

    const handleCloseConfirmModal = () => {
        setIsConfirmDeleteModalOpen(false);
    };

    const handleDeleteAccount = () => {
        // 实际删除账号的逻辑，可以发送请求到后端
        // console.log('删除账号', { reason, description });
        setIsConfirmDeleteModalOpen(false);
        // 删除成功后可以跳转到登出页面或首页
    };

    return (
        <div className="w-full relative bg-zinc-900 rounded-[10px] border border-[#282828] mx-auto mb-5 md:mb-10">
            <div className="w-full h-[0px] border-t border-[#363636]"></div>

            <div className="p-7 flex flex-col sm:flex-row justify-between gap-[14px] sm:gap-[0px]">
                <div className="flex flex-col sm:flex-row justify-between sm:items-center">
                    <div style={{ fontFamily: dynamicFonts.font1 }} className="text-white text-[12px] font-medium leading-normal lg:my-0 my-2">
                        {t('settings.dangerZone')}
                    </div>
                    <div style={{ fontFamily: dynamicFonts.font2 }} className="text-grey-light text-[11px] font-normal leading-normal sm:ml-2">
                        {t('settings.deleteAccountDescription')}
                    </div>
                </div>
                <div className="flex flex-col sm:flex-row justify-between sm:items-center">
                    <div className="flex">
                        <button
                            className="relative flex justify-center w-full items-center rounded-[10px] text-neutral-400 text-[11px] font-normal underline cursor-pointer"
                            onClick={handleOpenDeleteModal}
                        >
                            <div className="flex justify-center items-center">
                                <div style={{ fontFamily: dynamicFonts.font2 }}>
                                    {t('settings.deleteAccount')}
                                </div>
                            </div>
                        </button>
                    </div>
                </div>
            </div>

            {/* 删除账号第一步模态框 */}
            {isDeleteModalOpen && (
                <>
                    <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-xs min-h-screen w-full"></div>
                    <div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center items-center">
                        <div className="relative max-h-full">
                            <div className="relative rounded-lg shadow-2xs">
                                <div className="p-7 absolute flex-col justify-start items-start gap-6 inline-flex w-[350px] sm:w-[396px] h-full relative bg-stone-900 rounded-[10px] border border-neutral-700">
                                    <div className="flex-col justify-start items-start gap-2 flex">
                                        <div className="text-white text-2xl font-bold leading-[34px]">
                                            {t('settings.helpUsImprove')}
                                            <img
                                                onClick={handleCloseDeleteModal}
                                                src="/assets/cross-ec898236eb501d13f4d1343d4a90ed1c0afec71efde2ed1e606916d52f2c5331.svg"
                                                className="absolute top-[7px] right-[10px] cursor-pointer"
                                                alt="Close"
                                            />
                                        </div>
                                        <div className="w-full text-neutral-400 text-sm font-medium leading-tight">
                                            {t('settings.deleteAccountFeedbackRequest')}
                                        </div>
                                    </div>
                                    <div className="flex flex-col gap-7 w-full">
                                        <div>
                                            <select
                                                className="w-full p-[15px] text-white bg-neutral-800 rounded-[10px] border border-neutral-700 justify-start items-center"
                                                value={reason}
                                                onChange={(e) => setReason(e.target.value)}
                                                required
                                            >
                                                <option value="">{t('settings.selectReason')}</option>
                                                <option value="privacy_concerns">{t('settings.reasons.privacyConcerns')}</option>
                                                <option value="not_satisfied_with_features">{t('settings.reasons.notSatisfied')}</option>
                                                <option value="found_better_alternative">{t('settings.reasons.betterAlternative')}</option>
                                                <option value="concerns_about_data_security">{t('settings.reasons.dataSecurity')}</option>
                                                <option value="service_didnt_meet_expectations">{t('settings.reasons.expectations')}</option>
                                                <option value="difficulty_in_navigating">{t('settings.reasons.difficulty')}</option>
                                                <option value="lack_of_interesting_content">{t('settings.reasons.lackContent')}</option>
                                                <option value="temporary_break">{t('settings.reasons.temporaryBreak')}</option>
                                            </select>
                                        </div>
                                        <div>
                                            <textarea
                                                className="w-full h-[120px] p-[15px] text-white bg-neutral-800 rounded-[10px] border border-neutral-700 justify-start items-center py-3"
                                                placeholder={t('settings.description')}
                                                value={description}
                                                onChange={(e) => setDescription(e.target.value)}
                                                required
                                            ></textarea>
                                        </div>
                                        <div>
                                            <button
                                                className="w-full cursor-pointer px-4 py-3 bg-pink-dark rounded-[10px] gap-2 inline-flex justify-center items-center text-white text-sm font-semibold leading-tight"
                                                onClick={handleNext}
                                            >
                                                {t('common.next')}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            )}

            {/* 确认删除账号模态框 */}
            {isConfirmDeleteModalOpen && (
                <>
                    <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-xs min-h-screen w-full"></div>
                    <div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center items-center">
                        <div className="relative max-h-full">
                            <div className="relative rounded-lg shadow-2xs">
                                <div className="w-[350px] sm:w-[396px] h-[234px] relative bg-stone-900 rounded-[10px] border border-neutral-700">
                                    <div className="p-7 absolute flex-col justify-start items-start gap-8 inline-flex">
                                        <div className="flex-col justify-start items-start gap-2 flex">
                                            <div className="text-white text-2xl font-bold leading-[34px]">
                                                {t('settings.finalStep')}
                                                <img
                                                    onClick={handleCloseConfirmModal}
                                                    src="/assets/cross-ec898236eb501d13f4d1343d4a90ed1c0afec71efde2ed1e606916d52f2c5331.svg"
                                                    className="absolute top-[7px] right-[10px] cursor-pointer"
                                                    alt="Close"
                                                />
                                            </div>
                                            <div className="w-full text-neutral-400 text-sm font-medium leading-tight">
                                                {t('settings.deleteConfirmation')}
                                            </div>
                                        </div>
                                        <div className="flex w-full justify-between gap-6">
                                            <div className="flex justify-between gap-6 w-full">
                                                <button
                                                    onClick={handleDeleteAccount}
                                                    className="w-full h-11 px-4 py-3 rounded-[10px] border-2 border-pink-default"
                                                >
                                                    <div className="text-pink-default text-sm font-semibold leading-tight">
                                                        {t('settings.yesDelete')}
                                                    </div>
                                                </button>
                                                <button
                                                    onClick={handleCloseConfirmModal}
                                                    className="h-11 w-full px-4 py-3 bg-pink-dark rounded-[10px]"
                                                >
                                                    <div className="text-white text-sm font-semibold leading-tight">
                                                        {t('settings.noStay')}
                                                    </div>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            )}
        </div>
    );
};

export default DangerZone; 